<template>
	<view :style="{backgroundColor:pageData.bgColor,'--color':color}">
		<view class="p-left8 p-right8" v-if="list.length > 1">
			<u-tabs :list="list" :activeStyle="{color}" lineWidth="20" :lineColor="color" keyName="website_list_title" @click="click"></u-tabs>
		</view>
		<view class="p-left30 p-right30" v-if="list.length && !pageData.style">
			<block v-for="(item,index) in list[current].list" :key="index">
			<!-- 没有图片 -->
			<view class="row f-column p-top30 p-bot30 bot" v-if="!item.website_article_img && !item.website_article_atlas" @click="$pop.artDetails(item.website_article_id)">
				<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
				<view class="d-flex a-center m-top10 color_77 h7 bold400">
					<text class="m-right12">{{item.website_article_views}}阅读</text>
					<text class="m-right12">{{item.allZan}}点赞</text>
					<text class="m-right12">{{item.allComment}}评论</text>
				</view>
			</view>
			<!-- 右边小图 -->
			<view class="p-top30 p-bot30 bot" v-if="item.website_article_img && !item.website_article_atlas" @click="$pop.artDetails(item.website_article_id)">
				<view class="d-flex j-sb">
					<view style="width: 430rpx;">
						<view class="black size32 bold300 ellipsis_2 m-bot20">{{item.website_article_title}}</view>
						<view class="color_77 size28 bold300 ellipsis">{{item.website_article_info}}</view>
					</view>
					<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="list_one_img"></image>
				</view>
				<view class="d-flex a-center color_77 h7 bold400 m-top40">
					<text class="m-right12">{{item.website_article_views}}阅读</text>
					<text class="m-right12">{{item.allZan}}点赞</text>
					<text class="m-right12">{{item.allComment}}评论</text>
				</view>
			</view>
			<!--  一张大图 -->
			<view class="row p-top30 p-bot30 bot" v-if="item.website_article_atlas.length == 1" @click="$pop.artDetails(item.website_article_id)">
				<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
				<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="list_MAX_img m-top30 m-bot40"></image>
				<view class="row a-center color_77 h7 bold400">
					<text class="m-right12">{{item.website_article_views}}阅读</text>
					<text class="m-right12">{{item.allZan}}点赞</text>
					<text class="m-right12">{{item.allComment}}评论</text>
				</view>
			</view>
			
			<!-- 多图 -->
			<view class="row f-column p-top30 p-bot30 bot" v-if="item.website_article_atlas.length > 1" @click="$pop.artDetails(item.website_article_id)">
				<text class="black size32 bold300 ellipsis_2">{{item.website_article_title}}</text>
				<scroll-view scroll-x="true" class="scroll-row imgsView m-top20 m-bot40">
					<image :src="$imgUrls(subItem)" mode="aspectFill" class="list_more_img" 
					    v-for="(subItem,subIndex) in item.website_article_atlas" :key="subIndex"></image>
				</scroll-view>
				<view class="row a-center color_77 h7 bold400">
					<text class="m-right12">{{item.website_article_views}}阅读</text>
					<text class="m-right12">{{item.allZan}}点赞</text>
					<text class="m-right12">{{item.allComment}}评论</text>
				</view>
			</view>
			</block>
			
		</view>

		<!-- 横向滑动 -->
		<view v-if="list.length && pageData.style == 1" class="slide d-flex" :style="{'--radius':`${pageData.radius*2}rpx`}">
			<view v-for="(item,index) in list[current].list" :key="index" class="item bgwhite f-shrink-0 p-re" :class="{'shadow2': pageData.shadow == 1}"
				:style="{ marginRight: `${pageData.gap*2}rpx`, width: pageData.direction == 3 && pageData.width ? `${pageData.width*2}rpx` : '360rpx' }"
				@click="$pop.artDetails(item.website_article_id)">
				<text class="iconfont size28 p-ab" :class="item.article_collect ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
				<view class="img" :style="{ height }">
					<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="wh" v-if="item.website_article_img"></image>
					<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="wh" v-else-if="item.website_article_atlas"></image>
				</view>
				<view class="padding20">
					<view class="black size32 bold300 ellipsis m-bot20">{{ item.website_article_title }}</view>
					<view class="color_77 size28 bold300 ellipsis line40">{{ item.website_article_info }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:'ArticleList',
		props:['pageData'],
		
		data() {
			return {
				list: [],
				current:0,
				height: ''
			}
		},
		mounted() {
			if(this.pageData.direction == 0){
				this.height = '240rpx'
			} else if(this.pageData.direction == 1){
				this.height = '480rpx'
			} else if(this.pageData.direction == 2){
				this.height = '360rpx'
			} else{
				this.height =  this.pageData.height ? this.pageData.height * 2 + 'rpx' : '360rpx'
			}

			this.getBlockInfo();
		},
		methods: {
			...mapMutations(['setHome']),
			async getBlockInfo(){
				const result = await this.$getBlockInfo(this.pageData.list)
				if(!result.list.length) return
				this.list = result.list
			},
			click(e){
				this.current = e.index
			},
			handleCollect({website_article_id}){
				if (!this.vid) return this.setHome({showMode: true})
				this.$http.post({
					url: '/singleSaleApi/article_collect',
					data: {
						website_article_id
					}
				}).then(res => {
					if(res.code != 200) return this.$Toast(res.msg)
					this.getBlockInfo()
				})
			}
		},
		computed:{
			...mapState(['color','vid'])
		}
	}
</script>

<style lang="scss">
	.list_one_img{
		width:200rpx;
		height: 120rpx;
		overflow: hidden;
	}
	.list_MAX_img{
		width:100%;
		height: 340rpx;
		overflow: hidden;
	}
	.imgsView{
		height: 168rpx;
	}
	.list_more_img{
		width:210rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}
	.list_more_img:last-child{
		margin-right: 0 !important;
	}

	.slide {
		overflow-x: scroll;
		padding: 30rpx 0 10rpx 30rpx;
		// padding: 8rpx 0;
    	// margin: -8rpx 0; // 解决盒子阴影被截断问题
		.item {
			border-radius: var(--radius);
			.icon-guanzhu1,.icon-guanzhu3 {
				top: 20rpx;
				left: 20rpx;
				color: var(--color);
				z-index: 10;
			}
			.img {
				width: 100%;
				height: 240rpx;
				image {
					border-top-left-radius: var(--radius);
					border-top-right-radius: var(--radius);
				}
			}
		}
	}
	.shadow2 {
		box-shadow: 8rpx 8rpx 12rpx rgba(0,0,0,.06);
	}
</style>
